<template>
  <div>
      <van-nav-bar title="我的课程" left-arrow @click-left="onClickLeft" />
      <div class="add">
          <span>默认合集</span>
          <van-icon @click="addPopup" name="plus" />
          <van-popup class="ad" v-model="add" position="bottom" :style="{ height: '30%' }">
              <button class="btn2" @click="$router.push('/search_course')">添加课程</button>
              <button class="btn2 btn3" @click="add = false">取消</button>
          </van-popup>
      </div>
      <div class="three" v-for="item in course" :key="item.pid">
          <div>
              <img :src="base + item.pic" alt="">
          </div>
          <div class="zero">
              <p class="p1">{{ item.title }}</p>
              <span class="sp">K1 零基础 · {{ item.duration }}分钟</span>
              <p class="p2">简单</p>
          </div>
          <div class="delete" @click="showPopup(item.id)">...</div>
      </div>
      <van-divider>没有更多内容</van-divider>
  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import httpApi from '@/http'
import { base } from '@/service'
import storage from '@/utils/Storage';
export default {
  data() {
      return {
          course: [],
          show: false,
          add: false,
          base,
      };
  },
  mounted() {
      this.courseList();
  },
  methods: {
      onClickLeft() {
          this.$router.push('/home/my/userc')
      },
      showPopup(id) {
          Dialog.confirm({
              message: '是否删除课程?',
          })
              .then(() => {
                  this.deleteCourse(id)
              })
              .catch(() => {
                  // on cancel
              });
      },
      addPopup() {
          this.add = true;
      },
      courseList() {
          httpApi.courseApi.courserUserById({ uid: storage.get(storage.KEY_USER).uid }).then(res => {
              console.log(res)
              this.course = res.data.data
          })
      },
      deleteCourse(id) {
          console.log(id)
          httpApi.courseApi.courserUserDelete({ id }).then(res => {
              console.log('删除', res)
              if (res.data.code == 200) {
                  Toast('删除成功')
                  this.courseList()
                  this.show = false
              } else {
                  Toast('删除失败')
              }
          })
      }
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.van-nav-bar {
  margin-left: -9px;
}

::v-deep .van-nav-bar .van-icon {
  color: black;
}

.three {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  margin-left: 10px;
  border-radius: 10px;
}

.zero {
  margin-left: -100px;
}

.sp {
  font-size: 12px;
  color: #898989;
}

.p1 {
  margin-bottom: 7px;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.p2 {
  font-size: 12px;
  margin-top: 8px;
  color: #B0B0B0;
}

.delete {
  margin-right: 10px;
  color: #898989;
  font-weight: 600;
  position: relative;
  right: 8px;
  top: 15px;
}

.add {
  display: flex;
  justify-content: space-between;
  margin: 10px 17px 0px 13px;
}

.add>span {
  width: 80px;
  height: 30px;
  font-size: 14px;
  text-align: center;
  line-height: 30px;
  border-radius: 15px;
  background-color: #ECF8F4;
  color: #7BC0A2;
}

.btn1 {
  background-color: transparent;
  color: #898989;
  height: 55px;
  border: none;
  border-top: 1px solid #eee;
}

.btn2 {
  background-color: transparent;
  color: #3A3A3A;
  border: none;
  height: 55px;
}

.van-popup--bottom.del {
  height: 17% !important;
}

.van-popup--bottom.ad {
  height: 17% !important;
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.btn3 {
  background-color: transparent;
  color: #898989;
  border-top: 1px solid #eee;
}
</style>